<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
          margin: 0;
          padding: 0;
        }
        li {
          list-style: none;
        }
        .imglist {
          width: 1100px;
          height: 250px;
          background-color: #000;
          margin: 50px auto;
          padding: 20px 10px;
          overflow: hidden;
        }
        .imglist li {
          width: 200px;
          height: 250px;
          float: left;
          margin: 0 10px;
        }
        .imglist li img {
          width: 100%;
          height: 100%;
          background-color: aqua;
          object-fit: cover; /* 等比缩放，正好覆盖容器 */
        }
      
        /* 定义延迟加载动画 */
        .animation-fadeIn {
          opacity: 0; /* 透明度为0 */
          transform: translateY(calc(100% + 40px));
          /* 动画名  动画时间  延迟时间  动画结束后如何将样式应用于目标元素（停留在最后一帧）*/
          animation: fadeIn 1s var(--delay) forwards;
        }
      
        @keyframes fadeIn {
          100% {
            opacity: 1; /* 透明度为1 */
            transform: translateY(0);
          }
        }
      </style>
      
    </head>
<body>
    <ul class="imglist">
      <!-- 自动定属性，定义动画执行的延迟时间 -->
      <li class="animation-fadeIn" style="--delay: 0.1s">
        <img src="./images/01.jpg" />
      </li>
      <li class="animation-fadeIn" style="--delay: 0.2s">
        <img src="./images/02.jpg" />
      </li>
      <li class="animation-fadeIn" style="--delay: 0.3s">
        <img src="./images/03.jpg" />
      </li>
      <li class="animation-fadeIn" style="--delay: 0.4s">
        <img src="./images/04.jpg" />
      </li>
      <li class="animation-fadeIn" style="--delay: 0.5s">
        <img src="./images/05.jpg" />
      </li>
    </ul>
    
</body>
</html>